<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>

<meta name="description" content="Application MOSS CRVA">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="cleartype" content="on">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<link rel="stylesheet" href="css/normalize.css">

<!--link rel="stylesheet" href="css/grid.css"-->

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

<link rel="stylesheet/less" type="text/css" href="css/main.less">
<link rel="stylesheet/less" type="text/css" href="css/jquery.dataTables.less">
<script src="js/less.js" type="text/javascript"></script>

<script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/lib/jquery-touch-punch.js"></script>
<script type="text/javascript" src="js/lib/xml2json.js"></script>
<script type="text/javascript" src="js/lib/moment.js"></script>
<script type="text/javascript" src="js/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/lib/datatable-sort-date.js"></script>
<script type="text/javascript" src="js/lib/detect-date-type.js"></script>
<script type="text/javascript" src="js/lib/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="js/fastbutton.js"></script>

<script type="text/javascript" src="js/crvapp/jsonUtil.js"></script>
<script type="text/javascript" src="js/crvapp/stockageUtil.js"></script>
<script type="text/javascript" src="js/crvapp/formUtil.js"></script>
<script type="text/javascript" src="js/crvapp/dashboard.js"></script>
<script type="text/javascript" src="js/crvapp/crvaDetails.js"></script>
<script type="text/javascript" src="js/crvapp/dictionnary.js"></script>

<!-- beans -->
<script type="text/javascript" src="js/crvapp/beans/aeronef.js"></script>
<script type="text/javascript" src="js/crvapp/beans/decollageAtterissage.js"></script>
<script type="text/javascript" src="js/crvapp/beans/grade.js"></script>
<script type="text/javascript" src="js/crvapp/beans/heuresSAE.js"></script>
<script type="text/javascript" src="js/crvapp/beans/lieuOACI.js"></script>
<script type="text/javascript" src="js/crvapp/beans/nomination.js"></script>
<script type="text/javascript" src="js/crvapp/beans/personne.js"></script>
<script type="text/javascript" src="js/crvapp/beans/qualification.js"></script>
<script type="text/javascript" src="js/crvapp/beans/typeAeronef.js"></script>
<script type="text/javascript" src="js/crvapp/beans/unite.js"></script>
<script type="text/javascript" src="js/crvapp/beans/vol.js"></script>
<script type="text/javascript" src="js/crvapp/beans/volPersonneBord.js"></script>
<script type="text/javascript" src="js/crvapp/beans/typeUnite.js"></script>
<!-- A utiliser pour le dev (remplit et réinitialise le localStorage) A remplcer plus tard par le connecteur de synchro -->
<script type="text/javascript" src="js/crvapp/dataScript.js"></script>

<script type="text/javascript" src="js/crvapp/crva.js"></script>
</head>
<body>

	<!-- MOSS CRVApp START -->

	<div id="view">

		<!--################################################################
############################### SPLASH #############################
#################################################################-->
		<div id="page0">
			<div id="poster"></div>
			<div id="titre"></div>
			<div id="controls">
				<div id="loading">
					<img id="loading-gif" src="/img/loading.gif" alt="Chargement...">
				</div>
			</div>
			<div id="logos"></div>
		</div>
		<div id="page1">
			<!--################################################################
############################### PAGE 1 #############################
#################################################################-->
			<div id="top_panel">

				<div class="row span_18">
					<img id="logo" class="float" src="/img/logo.png">
					<h1 class="float" style="margin-left: 70px; line-height: normal;">Vols Aéronefs</h1>
				</div>

				<div id="crva_list_container">
					<div id="addFlight" class="button" onclick="crvapp.dashboard.newFlight()">Nouveau Vol</div>
					<table class="table span_18 push_1" id="crva_list_table">
						<thead>
							<tr>
								<th style="width: 22px"></th>
								<!--blank for spacing -->
								<th>ID Vol</th>
								<th>UIC Vol</th>
								<th>OACI</th>
								<th>GDH Début</th>
								<th>OACI</th>
								<th>GDH Fin</th>
								<th>Mission</th>
								<th>Etat Vol</th>
							</tr>
						</thead>
						<tbody id="crva_list_tbody">
						</tbody>
					</table>
				</div>

				<div id="unfold"></div>
			</div>

			<div id="crva_list_widgets_container">
				<div class="float">
					<div class="card" id="current_flights">
						<div class="title">9 vols en cours</div>
						<div class="data">2 CD725, 3 AA330, 4 FS43</div>
					</div>
					<div class="card" id="current_consumption">
						<div class="title">Consommation</div>
						<div class="jauge_background">
							<div class="jauge_foreground full" id="fuel_jauge_display"></div>
						</div>
					</div>
				</div>
				<div class="float">
					<div class="card" id="total_flight_time" style="height: 100px;">
						<div class="title">78:25:12</div>
						<div class="data">Temps total en vol</div>
					</div>
				</div>
				<div class="float">
					<div class="card" id="flights_day_night_repartition">
						<div class="title">Répartition des vols</div>
						<div id="global_flights_chart" class="float chart span_2" data-val="25"></div>
						<table class="data">
							<tr class="chartable" data-id="1">
								<td></td>
								<td class="noborder">Jour</td>
							</tr>
							<tr class="chartable" data-id="2">
								<td></td>
								<td class="noborder">Nuit</td>
							</tr>
						</table>
					</div>
				</div>


			</div>
		</div>

		<!--################################################################
############################### PAGE 2 #############################
#################################################################-->
		<div id="page2">
			<div id="top_panel_crva" class="row full top master_layout">
				<div id="validate" style="display: none;" class="button" onclick="crvapp.crvaDetails.validate()">Valider</div>
				<div id="moss_return" class="span_2 inline button">Retour</div>
				<h1 class="push_1 span_5 inline">Compte rendu du vol&nbsp;</h1>
				<h1 class="color span_3 inline" id="crva_detail_title"></h1>

				<!--<div id="progress_bar" class="span_10 push_2 float"></div>-->
			</div>

			<div id="flight_widgets_container" class="float master_layout">
				<!-- colonne -->
				<div class="float column">
					<!-- carte compte rendu de vol -->
					<div class="card" id="current_flights" data-demo="edit_flight_details">
						<div class="title">Détails du vol</div>
						<div class="line">
							<div class="label span_3">Indicatif</div>
							<div class="data" id="id_display"></div>
						</div>
						<div class="line">
							<div class="label">Unité</div>
							<div class="data" id="unit_display"></div>
						</div>
						<div class="line">
							<div class="label">Etat</div>
							<div class="data" id="state_display"></div>
						</div>
						<div class="line">
							<div class="label">Catégorie</div>
							<div class="data" id="category_display"></div>
						</div>
						<div class="line">
							<div class="label">Aéronef</div>
							<div class="data" id="aircraft_display"></div>
						</div>
						<div class="line">
							<div class="label">Règle de vol</div>
							<div class="data" id="flightRule_display"></div>
						</div>
						<div class="line">
							<div class="label">Type de vol</div>
							<div class="data" id="flighType_display"></div>
						</div>
					</div>

					<div class="card" id="fuel_consumption" data-demo="edit_flight_consumption">
						<div class="title">Carburant consommé</div>
						<div class="line">
							<div class="data" id="fuel_consumption_display"></div>
							<div class="label">&nbsp; / 550 L</div>
						</div>
						<div class="jauge_background">
							<div class="jauge_foreground full" id="fuel_jauge_display"></div>
						</div>
					</div>
				</div>

				<div class="float column">
					<!-- Carte Parcours -->
					<div class="card" id="infos_flight" data-demo="edit_flight_trip">
						<div class="title">Parcours</div>
						<div class="label">Début</div>
						<div class="line">
							<div class="subtitle span_2">GDH</div>
							<div class="data" id="gdh_begin_display"></div>
						</div>
						<div class="line">
							<div class="subtitle span_2">OACI</div>
							<div class="data" id="oaci_begin_display"></div>
						</div>
						<div class="line">
							<div class="subtitle span_2">Site</div>
							<div class="data" id="airfield_begin_display"></div>
						</div>
						<div class="label">Fin</div>
						<div class="line">
							<div class="subtitle span_2">GDH</div>
							<div class="data" id="gdh_end_display"></div>
						</div>
						<div class="line">
							<div class="subtitle span_2">OACI</div>
							<div class="data" id="oaci_end_display"></div>
						</div>
						<div class="line">
							<div class="subtitle span_2">Site</div>
							<div class="data" id="airfield_end_display"></div>
						</div>
						<div class="big_size" id="flight_time_total"></div>
					</div>

					<div class="card" id="flight_hours" data-demo="edit_flight_hours">
						<div class="title">Heures de vol</div>
						<div id="piechart6" data-val="44"></div>
					</div>
				</div>

				<div class="float column">
					<div class="card" id="intelligence" data-demo="edit_flight_intelligence">
						<div class="title">Renseignements</div>
						<div class="line">
							<div class="label span_9">Nature Mission</div>
						</div>
						<div class="line">
							<div class="data" id="nature_mission_display"></div>
						</div>
						<div class="line">
							<div class="label span_3">Manoeuvre Mission</div>
						</div>
						<div class="line">
							<div class="data" id="manoeuvre_mission_display"></div>
						</div>
						<div class="line">
							<div class="label span_3">Type Mission</div>
						</div>
						<div class="line">
							<div class="data" id="type_mission_display"></div>
						</div>
					</div>
				</div>

				<div class="float column">
					<div class="card" id="members_list" data-demo="edit_crme_list_members">
						<!-- special slide -->
						<div class="title">Membres d'équipage</div>
						<div class="label span_1">Total</div>
						<div class="data huge">3</div>
					</div>
				</div>


				<!-- CRVA Details END -->
			</div>

			<!--####################################################################
############################### EDIT PANEL #############################
####################################################################-->
			<!-- Sliding Edition Panel -->
			<div id="edit_panel" class="float master_layout">
				<div class="edit_panel_slides_wrapper">
					<!-- this is mockup data for demonstration purposes only -->

					<!-- ########################### SLIDE 1 ############################# -->
					<div class="demo_slide" id="edit_flight_details">
						<div class="edit_section">
							<div class="header">Détails du vol</div>
						</div>
						<div class="edit_section">
							<div class="title">Indicatif</div>
							<div id="demo_text_editor" class="type_text single-line" data-type="text" contenteditable="true">Indicatif à saisir</div>
							<!--input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" /-->
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Unité</div>
							<div class="type_list">
								<table id="unit_list_table">
									<tr data-id="1110000002">
										<td class="span_6">FRA2311</td>
										<td>3RHC-BHRA-EHRA1</td>
									</tr>
									<tr data-id="1110000004">
										<td class="span_6">FRA2312</td>
										<td>3RHC-BHRA-EHRA2</td>
									</tr>
									<tr data-id="1110000013">
										<td class="span_6">FRA2321</td>
										<td>3RHC-BHMA-EHM1</td>
									</tr>
									<tr data-id="1110000017">
										<td class="span_6">FRA2313</td>
										<td>3RHC-BHRA-EHRA3</td>
									</tr>
								</table>
							</div>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Etat</div>
							<table class="type_list" id="flight_state_table">
								<tr>
									<td class="hidden">ANN</td>
									<td>Annulé</td>
								</tr>
								<tr class="alternate">
									<td class="hidden">BR</td>
									<td>Brouillon</td>
								</tr>
								<tr>
									<td class="hidden">CLO</td>
									<td>Cloturé</td>
								</tr>
								<tr class="alternate">
									<td class="hidden">MOD</td>
									<td>Modifé</td>
								</tr>
								<tr>
									<td class="hidden">PROG</td>
									<td>Programmé</td>
								</tr>
								<tr>
									<td class="hidden">REF</td>
									<td>Refusé</td>
								</tr>
							</table>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Catégorie</div>
							<table class="type_list" id="category_flight_table">
								<tr>
									<td class="hidden">OTH</td>
									<td>Autre</td>
								</tr>
								<tr class="alternate">
									<td class="hidden">CIVIL ETRANGER</td>
									<td>Civil étranger</td>
								</tr>
								<tr>
									<td class="hidden">CIVIL FRANCAIS</td>
									<td>Civil Français</td>
								</tr>
								<tr class="alternate">
									<td class="hidden">MILITAIRE BASE</td>
									<td>Militaire Basé</td>
								</tr>
								<tr>
									<td class="hidden">MILITAIRE ETRANGER</td>
									<td>Militaire Etranger</td>
								</tr>
								<tr class="alternate">
									<td class="hidden">MILITAIRE FRANCAIS</td>
									<td>Militaire Français</td>
								</tr>
								<tr>
									<td class="hidden">MILITAIRE RSAF</td>
									<td>Militaire RSAF</td>
								</tr>
							</table>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Aéronef</div>
							<table class="type_list" id="aeronef_flight_table">
								<thead>
									<tr>
										<th>Aéronef</th>
										<th>Type</th>
									</tr>
								</thead>
								<tbody>
									<tr data-id="1110000085">
										<td class="span_4">FMGNF</td>
										<td>SA342M</td>
									</tr>
									<tr class="alternate" data-id="1110000090">
										<td class="span_6">FMGCQ</td>
										<td>S342M1</td>
									</tr>
									<tr data-id="1110000067">
										<td class="span_6">FMGKA</td>
										<td>SA342M</td>
									</tr>
									<tr class="alternate" data-id="1110000024">
										<td class="span_6">FMDBP</td>
										<td>SA330T</td>
									</tr>
									<tr data-id="1110000015">
										<td class="span_6">FMDDE</td>
										<td>SA330R</td>
									</tr>
									<tr class="alternate" data-id="1110000091">
										<td class="span_6">FMGAM</td>
										<td>S342M1</td>
									</tr>
									<tr data-id="1110000099">
										<td class="span_6">FMGER</td>
										<td>S342L1</td>
									</tr>
								</tbody>
							</table>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Règle de vol</div>
							<table class="type_list" id="flight_rule_table">
								<tr>
									<td class="hidden">A</td>
									<td>CAM</td>
								</tr>
								<tr>
									<td class="hidden">E</td>
									<td>CER</td>
								</tr>
								<tr>
									<td class="hidden">I</td>
									<td>IFR</td>
								</tr>
								<tr>
									<td class="hidden">O</td>
									<td>COM</td>
								</tr>
								<tr>
									<td class="hidden">V</td>
									<td>VFR</td>
								</tr>
								<tr>
									<td class="hidden">Y</td>
									<td>IFR-VFR</td>
								</tr>
								<tr>
									<td class="hidden">Z</td>
									<td>VFR-IFR</td>
								</tr>
							</table>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Type de vol</div>
							<table class="type_list" id="flight_type_table">
								<tr>
									<td class="hidden">D</td>
									<td>D</td>
								</tr>
								<tr>
									<td class="hidden">I</td>
									<td>CAM India</td>
								</tr>
								<tr>
									<td class="hidden">M</td>
									<td>Militaire</td>
								</tr>
								<tr>
									<td class="hidden">T</td>
									<td>CAM Tactique</td>
								</tr>
								<tr>
									<td class="hidden">V</td>
									<td>CAM Victor</td>
								</tr>
								<tr>
									<td class="hidden">X</td>
									<td>Autre</td>
								</tr>
							</table>
						</div>
					</div>

					<!-- ########################### SLIDE 2 ############################# -->

					<div class="demo_slide" id="edit_flight_consumption">
						<div class="edit_section">
							<div class="header">Carburant consommé</div>
							<div class="wrapper">
								<div id="slider-carburantConsomme-data" class="single-line" data-type="text" contenteditable="true">150</div>
								<!--                                 <div id="amount-fuel-consumption" data-type="text" class="single-line" contenteditable="true">0</div> -->
								<!--                                 <input id="slider-carburantConsomme-data" type="number" value="0" > -->
								<div id="slider-carburantConsomme"></div>
							</div>
							<div class="wrapper">
								<div id="slider-carburantTotal">/ 550 L</div>
							</div>
						</div>
					</div>

					<!-- ########################### SLIDE 3 ############################# -->
					<div class="demo_slide" id="edit_flight_trip">
						<div class="edit_section">
							<div class="header">Parcours</div>
						</div>
						<div class="edit_section">
							<div class="title">Début</div>
							<div class="span_3 float" id="flight-gdh-begin"></div>
							<input type="hidden" id="flight-gdh-begin-data" />
							<div id="timespinner_begin" class="float timespinner">
								<table>
									<tr id="r_1_begin">
										<td id="l_1" class="up" data-rel="#r_2_begin #l_1_begin" data-max="23">▲</td>
										<td id="l_2"></td>
										<td id="l_3" class="up" data-rel="#r_2_begin #l_3_begin" data-max="59">▲</td>
									</tr>
									<tr id="r_2_begin">
										<td><input type="text" id="l_1_begin" value="00" data-max="23" /></td>
										<td id="l_2_begin" class="sep">:</td>
										<td><input type="text" id="l_3_begin" value="00" data-max="59" /></td>
									</tr>
									<tr id="r_3_begin">
										<td id="l_1" class="down" data-rel="#r_2_begin #l_1_begin" data-max="23">▼</td>
										<td id="l_2_"></td>
										<td id="l_3" class="down" data-rel="#r_2_begin #l_3_begin" data-max="59">▼</td>
									</tr>
								</table>
							</div>
							<div class="clear"></div>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">lieu de départ</div>
							<div class="type_list">
								<table id="oaci_depart" class="span_4">
									<thead>
										<tr>
											<th>Code OACI</th>
											<th>Nom de Site</th>
										</tr>
									</thead>
									<tbody>
										<tr data-id="1110000001">
											<td>LFQE</td>
											<td>Etain Rouvres</td>
										</tr>
										<tr data-id="1110000002">
											<td>LFAD</td>
											<td>Compiègne</td>
										</tr>
										<tr data-id="1110000003">
											<td>LFQP</td>
											<td>Phalsbourg</td>
										</tr>
										<tr data-id="1110000004">
											<td>LFMC</td>
											<td>Le Cannet</td>
										</tr>
										<tr data-id="1110000005">
											<td>LFQG</td>
											<td>Nevers</td>
										</tr>
										<tr data-id="1110000006">
											<td>ZZZZ</td>
											<td>Indéterminé</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<hr>

						<div class="edit_section">
							<div class="title">Fin</div>
							<div class="span_3 float" id="flight-gdh-end"></div>
							<input type="hidden" id="flight-gdh-end-data" />
							<div id="timespinner" class="float timespinner">
								<table>
									<tr id="r_1_end">
										<td id="l_1" class="up" data-rel="#r_2_end #l_1_end" data-max="23">▲</td>
										<td id="l_2"></td>
										<td id="l_3" class="up" data-rel="#r_2_end #l_3_end" data-max="59">▲</td>
									</tr>
									<tr id="r_2_end">
										<td><input type="text" id="l_1_end" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value" /></td>
										<td id="l_2_end" class="sep"></td>
										<td><input type="text" id="l_3_end" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value" /></td>
									</tr>
									<tr id="r_3_end">
										<td id="l_1" class="down" data-rel="#r_2_end #l_1_end" data-max="23">▼</td>
										<td id="l_2"></td>
										<td id="l_3" class="down" data-rel="#r_2_end #l_3_end" data-max="59">▼</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="clear"></div>
						<hr>

						<div class="edit_section">
							<div class="title">Lieu d'arrivé</div>
							<div class="type_list">
								<table id="oaci_fin" class="span_4">
									<thead>
										<tr>
											<th>Code OACI</th>
											<th>Nom de Site</th>
										</tr>
									</thead>
									<tbody>
										<tr data-id="1110000001">
											<td>LFQE</td>
											<td>Etain Rouvres</td>
										</tr>
										<tr data-id="1110000002">
											<td>LFAD</td>
											<td>Compiègne</td>
										</tr>
										<tr data-id="1110000003">
											<td>LFQP</td>
											<td>Phalsbourg</td>
										</tr>
										<tr data-id="1110000004">
											<td>LFMC</td>
											<td>Le Cannet</td>
										</tr>
										<tr data-id="1110000005">
											<td>LFQG</td>
											<td>Nevers</td>
										</tr>
										<tr data-id="1110000006">
											<td>ZZZZ</td>
											<td>Indéterminé</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<hr>

					</div>

					<!-- ########################### SLIDE 4 ############################# -->
					<div class="demo_slide" id="edit_flight_intelligence">
						<div class="edit_section">
							<div class="header">Renseignements</div>
						</div>
						<div class="edit_section">
							<div class="title">Nature Mission</div>
							<table id="mission_nature_list" class="type_list">
								<thead>
									<tr>
										<th>Code</th>
										<th>Libellé</th>
									</tr>
								</thead>
								<tbody id="mission_nature_list_tbody"></tbody>
							</table>
						</div>
						<div class="edit_section">
							<div class="title">Manoeuvre Mission</div>
							<table id="mission_manoeuvre_list" class="type_list">
								<thead>
									<tr>
										<th>Code</th>
										<th>Libellé</th>
									</tr>
								</thead>
								<tbody id="mission_manoeuvre_list_tbody"></tbody>
							</table>
						</div>
						<div class="edit_section">
							<div class="title">Type Mission</div>
							<table id="mission_type_list" class="type_list">
								<thead>
									<tr>
										<th>Code</th>
										<th>Libellé</th>
									</tr>
								</thead>
								<tbody id="mission_type_list_tbody"></tbody>
							</table>
						</div>
					</div>

					<!-- ########################### SLIDE 5 ############################# -->
					<div class="demo_slide" id="edit_crme_list_members">
						<div id="crme_top_panel" class="edit_section">
							<div class="header">CRME</div>

							<div id="crme_list_container">
								<table class="centered span_12" id="members_list_table">
									<thead>
										<tr>
											<th>Nom</th>
											<th>Grade</th>
											<th>Fonction</th>
											<th>CRME</th>
										</tr>
									</thead>
									<tbody id="members_list_tbody"></tbody>
								</table>
							</div>
						</div>
					</div>

					<!-- ########################### SLIDE 6 ############################# -->
					<div class="demo_slide" id="edit_flight_hours" data-demo="flight_hours">

						<div class="editable_list_table">
							<div class="edit_section">
								<div class="header">Liste des heures</div>

								<table contenteditable="false" class="editable_list float" id="edit_crme_hours_list">
									<thead>
										<tr>
											<th>Type</th>
											<th>Durée Jour</th>
											<th>Durée Nuit</th>
										</tr>
									</thead>
									<tbody id="edit_crme_hours_list_tbody"></tbody>
									<tfoot></tfoot>
								</table>
							</div>
							<hr>

							<div class="editable_list_edit_panel">
								<div class="edit_section ">
									<div class="title">Type d'heure</div>
									<table id="type_heure_table">
										<thead>
											<tr>
												<th>Code</th>
												<th>Type</th>
											</tr>
										</thead>
										<tbody id="type_heure_tbody"></tbody>
									</table>
								</div>
								<hr>

								<div class="edit_section">
									<div class="title">Durée Jour</div>
									<div id="timespinner2" class="timespinner selected">
										<table>
											<tr id="r_1_day">
												<td id="l_1_timespinner2" class="up" data-rel="#r_2_day_timespinner2 #l_1_day_timespinner2" data-max="23">▲</td>
												<td id="l_2"></td>
												<td id="l_3_timespinner2" class="up" data-rel="#r_2_day_timespinner2 #l_3_day_timespinner2" data-max="59">▲</td>
											</tr>
											<tr id="r_2_day_timespinner2">
												<td><input type="text" id="l_1_day_timespinner2" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 00 : this.value" /></td>
												<td id="l_2_day" class="sep"></td>
												<td><input type="text" id="l_3_day_timespinner2" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 00 : this.value" /></td>
											</tr>
											<tr id="r_3_day_timespinner2">
												<td id="l_1_timespinner2" class="down" data-rel="#r_2_day_timespinner2 #l_1_day_timespinner2" data-max="23">▼</td>
												<td id="l_2"></td>
												<td id="l_3_timespinner2" class="down" data-rel="#r_2_day_timespinner2 #l_3_day_timespinner2" data-max="59">▼</td>
											</tr>
										</table>
									</div>
								</div>
								<hr>

								<div class="edit_section">
									<div class="title">Durée Nuit</div>
									<div id="timespinner3" class="timespinner selected">
										<table>
											<tr id="r_1_night">
												<td id="l_1_timespinner3" class="up" data-rel="#r_2_night_timespinner3 #l_1_night_timespinner3" data-max="23">▲</td>
												<td id="l_2"></td>
												<td id="l_3_timespinner3" class="up" data-rel="#r_2_night_timespinner3 #l_3_night_timespinner3" data-max="59">▲</td>
											</tr>
											<tr id="r_2_night_timespinner3">
												<td><input type="text" id="l_1_night_timespinner3" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value" /></td>
												<td id="l_2_night" class="sep"></td>
												<td><input type="text" id="l_3_night_timespinner3" value="00" onfocus="this.value=''" onblur="this.value=(this.value=='')? 0 : this.value" /></td>
											</tr>
											<tr id="r_3_night_timespinner3">
												<td id="l_1_timespinner3" class="down" data-rel="#r_2_night_timespinner3 #l_1_night_timespinner3" data-max="23">▼</td>
												<td id="l_2"></td>
												<td id="l_3_timespinner3" class="down" data-rel="#r_2_night_timespinner3 #l_3_night_timespinner3" data-max="59">▼</td>
											</tr>
										</table>
									</div>
								</div>
								<hr>
							</div>
						</div>
					</div>
					<!-- fin slide 6 -->
				</div>


				<div id="crme_cards_wrapper">
					<!-- ############################ CRME CARDS ##############################-->
					<div id="crme_cards" class="float">

						<!-- détails -->
						<div class="card float" id="crme_member_details" data-demo="edit_crme_member_details">
							<div class="title">Détails membre équipage</div>
							<div class="line">
								<div class="label">Nom</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">NID</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">Fonction</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">Type de place</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">Responsabilité</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">Type de vol</div>
								<div class="data"></div>
							</div>
							<div class="line">
								<div class="label">Grade</div>
								<div class="data"></div>
							</div>
						</div>

						<!-- heures -->
						<div class="card float" id="crme_hours" data-demo="edit_crme_hours">
							<div class="title">Liste des heures</div>
							<!-- Ici on affiche des diagrammes et un total -->
							<div class="line">
								<div class="label span_2">Total</div>
								<div class="data">5:35</div>
							</div>
							<div class="line">
								<div class="label span_2">Autres</div>
								<div class="data">2:13</div>
							</div>
							<div id="piechart2" data-val="34"></div>
						</div>

						<!-- renseignements -->
						<div class="card float" id="crme_rens" data-demo="edit_crme_rens">
							<div class="line">
								<div class="title">Renseignements</div>
								<div class="line">
									<div class="label">Approches</div>
									<div class="data"></div>
								</div>
								<div class="title">Mission</div>
								<div class="line">
									<div class="label">Manoeuvre</div>
									<div class="data"></div>
								</div>
								<div class="line">
									<div class="label">Type</div>
									<div class="data"></div>
								</div>
								<div class="line">
									<div class="label">Nature</div>
									<div class="data"></div>
								</div>
							</div>
						</div>

						<!-- passes -->
						<div class="card float" id="crme_passes" data-demo="edit_crme_passes">
							<div class="title">Passes</div>
							<div class="label span_1">Total</div>
							<div class="data">5</div>
							<div id="piechart4" data-val="80"></div>
						</div>

						<!-- exercices particuliers -->
						<div class="card float" id="crme_exos_part" data-demo="edit_crme_exos_part">
							<div class="title">Exercices particuliers</div>
							<div class="label span_1">Total</div>
							<div class="data">3</div>
							<div id="piechart5" data-val="45"></div>
						</div>
					</div>

					<!-- ######################### CRME EDIT PANEL ########################### -->
					<div id="crme_edit" class="">

						<!-- ################ CRME Slide 1 ################### -->
						<div class="crme_slide" id="edit_crme_member_details" data-demo="crme_member_details">
							<div class="edit_section">
								<div class="header">Détails membre équipage</div>
							</div>
							<div class="edit_section">
								<div class="title">Nom</div>
								<div id="demo_text_editor2" class="type_text" data-type="text">Nom</div>
								<input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" />
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Matricule</div>
								<div id="demo_text_editor3" class="type_text" data-type="text">NID</div>
								<input id="demo_text_editor_input" type="text" class="type_text" style="display: none;" />
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Grade</div>
								<div class="type_list">
									<table>
										<tr class="span_6">
											<td data-id="1">Capitaine</td>
										</tr>
										<tr class="span_6">
											<td data-id="2">Moussaillon</td>
										</tr>
										<tr class="span_6">
											<td data-id="3">Génie</td>
										</tr>
										<tr class="span_6">
											<td data-id="4">Lieutenant</td>
										</tr>
									</table>
								</div>
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Fonction à bord</div>
								<div class="type_list">
									<table>
										<tr class="span_6">
											<td data-id="1">Fonction x</td>
										</tr>
										<tr class="span_6">
											<td data-id="2">Fonction x</td>
										</tr>
										<tr class="span_6">
											<td data-id="3">Fonction x</td>
										</tr>
										<tr class="span_6">
											<td data-id="4">Fonction x</td>
										</tr>
									</table>
								</div>
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Type place</div>
								<div class="type_list">
									<table>
										<tr class="span_6">
											<td data-id="1">Place x</td>
										</tr>
										<tr class="span_6">
											<td data-id="2">Place x</td>
										</tr>
										<tr class="span_6">
											<td data-id="3">Place x</td>
										</tr>
										<tr class="span_6">
											<td data-id="4">Place x</td>
										</tr>
									</table>
								</div>
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Responsabilité</div>
								<div class="type_list">
									<table>
										<tr class="span_6">
											<td data-id="1">Valeur x</td>
										</tr>
										<tr class="span_6">
											<td data-id="2">Valeur x</td>
										</tr>
										<tr class="span_6">
											<td data-id="3">Valeur x</td>
										</tr>
										<tr class="span_6">
											<td data-id="4">Valeur x</td>
										</tr>
									</table>
								</div>
							</div>
							<hr>

							<div class="edit_section">
								<div class="title">Type vol</div>
								<div class="type_list">
									<table>
										<tr class="span_6">
											<td data-id="1">Type x</td>
										</tr>
										<tr class="span_6">
											<td data-id="2">Type x</td>
										</tr>
										<tr class="span_6">
											<td data-id="3">Type x</td>
										</tr>
										<tr class="span_6">
											<td data-id="4">Type x</td>
										</tr>
									</table>
								</div>
							</div>
							<hr>
						</div>
						<!-- fin slide 1 -->

						<!-- ################# CRME Slide 2 ################### -->


						<!-- renseignements -->
						<div class="crme_slide" id="edit_crme_rens" data-demo="crme_rens">
							<div class="line">
								<div class="title">Renseignements</div>
								<div class="line">
									<div class="label">Approches</div>
									<div class="data"></div>
								</div>
								<div class="title">Mission</div>
								<div class="line">
									<div class="label">Manoeuvre</div>
									<div class="data"></div>
								</div>
								<div class="line">
									<div class="label">Type</div>
									<div class="data"></div>
								</div>
								<div class="line">
									<div class="label">Nature</div>
									<div class="data"></div>
								</div>
							</div>
						</div>

						<!-- passes -->
						<div class="crme_slide" id="edit_crme_passes" data-demo="crme_passes">
							<div class="title">Passes</div>
							<div class="label">Total</div>
							<div class="data">5</div>
							<div id="piechart4" data-val="80"></div>
						</div>

						<!-- exercices particuliers -->
						<div class="crme_slide" id="edit_crme_exos_part" data-demo="crme_exos_part">
							<div class="title">Exercices particuliers</div>
							<div class="label">Total</div>
							<div class="data">3</div>
							<div id="piechart5" data-val="45"></div>
						</div>
					</div>
				</div>
				<!-- END crme_cards wrapper -->
			</div>
			<!-- #edit_panel end -->
		</div>
	</div>
	<!-- #view end -->

	<script src="js/main.js"></script>
	<script src="js/editable_list.js"></script>
	<script src="js/navigation.js"></script>
	<script type="text/javascript">
		var flightTable;
		var natureMissionTable;
		var manoeuvreMissionTable;
		var typeMissionTable;
		var codeServiceAerienTable;

		$(document).ready(
				function() {
					$('#page0, #page2').hide();

					if (crvapp.stockageUtil.getvalueAsJson("crvappData") === "" || crvapp.stockageUtil.getvalueAsJson("crvappData") === null
							|| crvapp.stockageUtil.getvalueAsJson("crvappData") === undefined) {

						console.log("BEGIN : " + moment().format());
						//         	try {
						dataScript.populateLocalStorage();
						// 			} catch (e) {
						// 				 console.log("END : " + moment().format());
						// 			}

						console.log("END : " + moment().format());

					} else {
						crvapp.stockageUtil.loadCrvAppData();
					}
					crvapp.dashboard.fillFlight(document.getElementById("crva_list_tbody"));

					flightTable = $("#crva_list_table").dataTable({
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						},
						"iDisplayLength" : 3,
						"bLengthChange" : false,
						"bFilter" : true,
						"bPaginate" : true,
						"bInfo" : true,
						"sScrollY" : "200px",
						"aoColumns" : [ {
							"bSortable" : false
						}, null, null, null, null, null, null, null, null ]
					});

					$("#members_list_table").dataTable({
						"bLengthChange" : false,
						"bFilter" : false,
						"bPaginate" : false,
						"bInfo" : false,
						"bDestroy" : true,
						"bRetrieve" : false,
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						}
					});

					// Renseignements

					crvapp.dashboard.createDictionnaryTableList();

					// Nature Mission

					/* Add a click handler to the rows - this could be used as a callback */
					$("#mission_nature_list tbody tr").click(function(e) {
						if ($(this).hasClass('row_selected')) {
							$(this).removeClass('row_selected');
						} else {
							natureMissionTable.$('tr.row_selected').removeClass('row_selected');
							$(this).addClass('row_selected');
						}
					});
					natureMissionTable = $("#mission_nature_list").dataTable({
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						},
						"iDisplayLength" : 5,
						"bPaginate" : true,
						"bInfo" : true,
						"bFilter" : true,
						"aoColumns" : [ {
							"sWidth" : "25%"
						}, {
							"sWidth" : "75%"
						} ]
					});
					$("#mission_nature_list").css("width", "90%");

					// Manoeuvre Mission

					/* Add a click handler to the rows - this could be used as a callback */
					$("#mission_manoeuvre_list tbody tr").click(function(e) {
						if ($(this).hasClass('row_selected')) {
							$(this).removeClass('row_selected');
						} else {
							manoeuvreMissionTable.$('tr.row_selected').removeClass('row_selected');
							$(this).addClass('row_selected');
						}
					});
					manoeuvreMissionTable = $("#mission_manoeuvre_list").dataTable({
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						},
						"iDisplayLength" : 5,
						"bPaginate" : true,
						"bInfo" : true,
						"bFilter" : true,
						"aoColumns" : [ {
							"sWidth" : "25%"
						}, {
							"sWidth" : "75%"
						} ]
					});
					$("#mission_manoeuvre_list").css("width", "90%");

					// Type Mission

					/* Add a click handler to the rows - this could be used as a callback */
					$("#mission_type_list tbody tr").click(function(e) {
						if ($(this).hasClass('row_selected')) {
							$(this).removeClass('row_selected');
						} else {
							typeMissionTable.$('tr.row_selected').removeClass('row_selected');
							$(this).addClass('row_selected');
						}
					});
					typeMissionTable = $("#mission_type_list").dataTable({
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						},
						"iDisplayLength" : 5,
						"bPaginate" : true,
						"bInfo" : true,
						"bFilter" : true,
						"aoColumns" : [ {
							"sWidth" : "25%"
						}, {
							"sWidth" : "75%"
						} ]
					});
					$("#mission_type_list").css("width", "90%");

					// Fin Renseignements

					// Heures de vols

					/* Add a click handler to the rows - this could be used as a callback */
					$("#type_heure_table tbody tr").click(function(e) {
						if ($(this).hasClass('row_selected')) {
							$(this).removeClass('row_selected');
						} else {
							codeServiceAerienTable.$('tr.row_selected').removeClass('row_selected');
							$(this).addClass('row_selected');
						}
					});
					codeServiceAerienTable = $("#type_heure_table").dataTable({
						"oLanguage" : {
							"sUrl" : "frenchDatatable.txt"
						},
						"iDisplayLength" : 5,
						"bPaginate" : true,
						"bInfo" : true,
						"bFilter" : true,
						"aoColumns" : [ {
							"sWidth" : "25%"
						}, {
							"sWidth" : "75%"
						} ]
					});
					$("#type_heure_table").css("width", "90%");

					// Fin heures de vols

					$("#slider-carburantConsomme").slider({
						range : "min",
						min : 0,
						max : 550,
						value : 0, /* /!\ Penser à mettre à jour #slider-carburantConsomme-data si on change cette*/
						animate : true,
						slide : function(event, ui) {
							$("#slider-carburantConsomme-data").text(ui.value);
						}
					});

					$("#slider-carburantConsomme-data").keyup(function(e) {
						if (/\D/g.test(this.value)) {
							this.value = this.value.replace(/\D/g, '');
						} else {
							$("#slider-carburantConsomme").slider("value", $("#slider-carburantConsomme-data").text());
						}
					});

					$("#slider-carburantConsomme-data").text($("#slider-carburantConsomme").slider("value"));

					$("#flight-gdh-begin").datepicker({
						regional : $.datepicker.regional["fr"],
						altField : "#flight-gdh-begin-data"
					});

					$("#flight-gdh-end").datepicker({
						regional : $.datepicker.regional["fr"],
						altField : "#flight-gdh-end-data"
					});
					crvapp.stockageUtil.exportXmlData();
				});

		/* Get the rows which are currently selected */
		function fnGetSelected(oTableLocal) {
			return oTableLocal.$('tr.row_selected');
		}
	</script>
	<!-- MOSS CRVApp END -->

	<script src="js/vendor/zepto.min.js"></script>
	<script src="js/helper.js"></script>

</body>
</html>